<template>
	<view class="shop-cart" :class="themeName">
		<view class="main ">

			<!-- 商品卡片 -->
            <block v-for="(item, index) in cartLists" :key="index">
                <view class="cart-list">
                	<view class="cart-item bg-white" :class="{invalid: item.cart_status != 0}">
                
                		<!-- 商品头部 -->
                		<view class="row-between flex select" v-if="item.cart_status == 0">
                			<u-checkbox label-size="28rpx" :active-color="themeColor" v-model="item.selected"
                				@change="changeGoodsStatus(item.selected, item.id)" :label-disabled="false" shape="circle">
                				<text class="normal">选择</text>
                			</u-checkbox>
                			<view @click="changeDelPopup(item.id)">
                				<image class="icon-xl" style="width: 56rpx;height: 56rpx;"
                					src="/static/images/icon_del.png" />
                			</view>
                		</view>
                
                		<!-- 商品头部已失效的状态 -->
                		<view class="select row-between flex sm muted" v-else>
                			已失效
                			<view :data-cartid="item.cart_id" @click="changeDelPopup(item.id)">
                				<image class="icon-xl" style="width: 56rpx;height: 56rpx;"
                					src="/static/images/icon_del.png" />
                			</view>
                		</view>
                
                		<!-- 商品的主内容 -->
						<router-link :to="`/pages/goods_detail/goods_detail?id=${item.goods_id}`">
							<view class="flex" style="padding: 20rpx">
								<u-image width="180rpx" height="180rpx" :src="item.goods.image" />
								<view class="m-l-20" style="flex: 1">
									<view class="line-2 nr">{{item.goods.name}}</view>
									<view class="muted xs line-1 m-t-10">
										{{item.goods_item.spec_value_str}}
									</view>
									<view class="row-between flex m-t-20">
										<view class="price flex primary">
											<price :content="item.goods_item.sell_price" :color="themeColor" mainSize="36rpx"
												minorSize="28rpx"></price>
										</view>
										<view class="cartNum" @tap.stop="">
											<u-number-box :disabled="item.cart_status != 0" v-model="item.goods_num" :min="1"
												async-change positiveInteger @change="countChange($event, item.id)" />
										</view>
									</view>
								</view>
							</view>
						</router-link>
                	</view>
                </view>
            </block>
            
			<!-- 购物车空状态 -->
			<view class="cart-null bg-white m-b-20" style="padding: 80rpx 0 50rpx" v-if="isLogin && cartLists.length == 0">
				<image class="img-null" src="/static/images/empty/cart.png"></image>
				<view class="muted m-b-20">购物车暂无任何商品~</view>
				<view class="br60 btn flex row-center" @tap="goShoping">去逛逛</view>
			</view>

			<!-- 是否登录的空状态 -->
			<view v-if="!isLogin" class="login column-center" style="padding: 200rpx 0 50rpx">
				<image class="img-null" src="/static/images/empty/cart.png"></image>
				<view class="muted mt20">登录后才能查看购物车哦</view>
				<navigator class="white br60 row-center btn" url="/pages/login/login">
					<text>去登录</text>
				</navigator>
			</view>

			<!-- diy组件区 -->
			<block v-for="(item, cIndex) in pagesData" :key="cIndex">
				<template v-if="item.name=='goodsrecom'">
					<w-goodsrecom v-show="item.show" :content="item.content" :styles="item.styles" />
				</template>
			</block>
		</view>

		<!-- 底部结算栏 -->
		<view class="footer flex bg-white">
			<!-- left -->
			<checkbox-group class="normal">
				<u-checkbox label-size="28rpx" @change="changeAllSelect" id="checkAll" value="all"
					:active-color="themeColor" v-model="isSelectedAll" :label-disabled="false" :disabled="selectAllDisabled" shape="circle">
					<text class="normal">全选</text>
				</u-checkbox>
			</checkbox-group>
			<!-- <view class="">
                删除
            </view> -->
			<!-- right -->
			<view class="all-price nr m-r-20 flex row-right">
				<view>合计：</view>
				<price :content="total_amount||0" :color="themeColor" mainSize="36rpx" minorSize="28rpx"></price>
			</view>
			<view class="right-btn br60 white" v-if="getResultBtn" @tap="goToConfirm">去结算</view>
            <view class="right-btn br60 lighter" style="background: #f2f2f2;" v-else>去结算</view>
		</view>

		<!-- 是否删除商品的弹窗 -->
		<u-modal v-model="delPopup" :showCancelButton="true" comfirm-text="狠心删除" :confirm-color="themeColor"
			:show-title="false" @confirm="goodsDelete">
			<view style="padding-top: 40rpx" class="flex row-center">
				<!-- <image class="icon-lg" src="/static/images/icon_warning.png" /> -->
				<view style="margin:50rpx 0;">确认删除该商品吗？</view>
			</view>
		</u-modal>
		<tabbar />
		
		<!-- 加载中 -->
		<u-mask :show="isChangeLoading" :mask-click-able="false" :custom-style="{background: 'rgba(0, 0, 0, 0)'}"></u-mask>
		<view class="loading" v-if="isChangeLoading">
			<u-loading size="40" :color="themeColor"></u-loading>
			<view class="white m-t-20">
				加载中...
			</view>
		</view>
	</view>
</template>

<script>
	import {
		apiCartLists,       //商品列表
		apiCartDel,         //商品删除
		apiCartCountChange, //商品数量改变
		apiCartSelectChange,//选择商品
		apiCartNum,         //购物车数量
		apiGetPage          //获取当前diy页面
	} from "@/api/store";
	import { OrderTypeEnum } from '@/utils/enum'
	import { trottle } from '@/utils/tools'
	
	export default {
		name: 'ShopCart',

		data() {
			return {
				pagesData: [],          //diy的组件
				total_amount: '',       //合计｜｜总余额
				cartLists: [],          //购物车数据
				cartListsId: [],        //购物车数据的所有ID
				total_amount: '',       //购物车合计金额
				delPopup: false,        //是否弹出删除商品的弹窗
				cart_id: 0,             //删除的购物车ID
				isSelectedAll: false,   //是否全选
				
				isChangeLoading: false,   	//是否是操作请求中状态
			}
		},

		methods: {

			// 获取购物车数据列表
			getCartList() {
				return apiCartLists().then(res => {
					this.total_amount = res.total_amount
                    res.lists.forEach((item, index) => {
                        res.lists[index].selected = item.selected == 1 ? true:false
                    })
					this.cartLists = res.lists;
					this.baseSelect(res.lists)
					this.$store.dispatch('getCartNum')
					
					this.isChangeLoading = false
					
					return Promise.resolve()
				})
			},

			// 初始化商品的选中状态
			baseSelect(data) {
				this.cartListsId = []
				const res = data.filter(el => {
					this.cartListsId.push(el.id)
					return el.selected == false
				})
				
				this.isSelectedAll = true;
				this.goodsListActive.map(item => {
					if (!item.selected) this.isSelectedAll = false
				})
				// if (res.length == 0) {
				// 	this.isSelectedAll = true;
				// } else {
				// 	this.isSelectedAll = false;
				// }
			},

			// 商品数量的修改
			countChange({ value }, id) {
				this.isChangeLoading = true
				apiCartCountChange({
					cart_id: id,
					goods_num: value
				}).then(res => {
					this.$store.dispatch('getCartNum')
				}).finally(() => {
					this.getCartList()
				})
			},

			// 弹窗拿到当前需要删除的商品购物车ID
			changeDelPopup(cart_id) {
				this.delPopup = true;
				this.cart_id = cart_id;
			},

			// 删除购物车的商品
			async goodsDelete() {
				this.isChangeLoading = true
				await apiCartDel({
					cart_id: this.cart_id
				})
				await this.getCartList()
				this.$toast({
					title: '删除成功'
				})
			},

			// 单选
			changeGoodsStatus(status, id) {
				this.isChangeLoading = true
				status = status == 1 ? 0 : 1
				apiCartSelectChange({
					cart_id: [id],
					selected: status
				}).then(res => {
					this.getCartList()
				})
			},

			// 全选商品
			changeAllSelect() {
				this.isChangeLoading = true
				const status = this.isSelectedAll == true ? 0 : 1
				const cartIDs = this.goodsListActive.map(item => item.id)
				apiCartSelectChange({
					cart_id: cartIDs,
					selected: status
				}).then(res => {
					this.getCartList()
				})
			},
			
			// 去购物
			goShoping() {
				this.$Router.replaceAll('/pages/index/index')
			},

			// 去结算
			goToConfirm() {
                const carts = this.cartLists
                	.filter(item => item.selected)
                	.map(item => item.id)
                if(carts.length == 0) return this.$toast({title: '请选择商品'})
                this.$Router.push({
                	path: '/pages/goods_order/goods_order',
                	query: {
						from: OrderTypeEnum['GOODS'],
						payload: {
							source: 'cart',
							cart_id: carts,
						}
                	}
                })
			},
            
			// 去首页
			changeTab() {
				this.$Router.replaceAll({
					path: '/pages/index/index'
				})
			},
			
			getPage() {
				apiGetPage({
					type: 4
				}).then(res => {
					const {
						common: {
							title
						},
						common,
						content
					} = res
					uni.setNavigationBarTitle({
						title
					});
					this.pagesData = content
				})
			}
		},
		computed: {
			cartNum() {
				return this.$store.state.cart.cartNum
			},
            getResultBtn() {
                const carts = this.cartLists
                	.filter(item => item.selected)
                	.map(item => item.id)
                if(carts.length == 0) {
                    this.isSelectedAll = false
                    return false
                } else {
                    return true
                }
            },
			
			// 可售卖商品列表
			goodsListActive() {
				return this.cartLists.filter(item => item.cart_status == 0) || []
			},
			
			// 是否可全选操作
			selectAllDisabled() {
				return !!!this.goodsListActive.length
			}
		},
		async onShow() {
			// this.getCartNum()
			await this.getCartList()
			if (this.isLogin) {
				this.getPage()
			}
		},
		
		created() {
			this.countChange = trottle(this.countChange, 200)
		}
	}
</script>
<style lang="scss">
		.shop-cart {
			position: relative;
			.loading {
				position: fixed;
				left: 39vw;
				top: 35vh;
				height: 170rpx;
				width: 170rpx;
				border-radius: 20rpx;
				background: rgba(0, 0, 0, 0.5);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}
		.main {
			padding-bottom: 100rpx;
		}

		.cart-list {
			.cart-item {
				margin: 20rpx 20rpx 0;
				border-radius: 10rpx;

				&.invalid {
                    opacity: .7;
                    // background-color: #999;
					// @include background_color();
				}
			}

			.select {
				height: 80rpx;
				padding: 0 20rpx;
				// @include border_color();
				// border-style: solid;
			}
		}

		.cart-null {
			text-align: center;

			.btn {
				@include font_color();
				@include border_color();
				border-width: 1rpx;
				border-style: solid;
				width: 184rpx;
				margin-left: auto;
				margin-right: auto;
				padding: 8rpx 24rpx;
			}
		}

		.footer {
			left: 0;
			margin-bottom: 100rpx;
			bottom: calc(env(safe-area-inset-bottom));
			width: 100%;
			z-index: 20;
			height: 100rpx;
			position: fixed;
			padding: 0 24rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);

			.all-price {
				text-align: right;
				flex: 1;
			}

			.right-btn {
				padding: 13rpx 45rpx;
				@include background_color();
			}
		}

		.login {
			// height:calc(100vh - var(--window-bottom));
			background: #fff;
			text-align: center;
			
			.btn {
				width: 280rpx;
				line-height: 70rpx;
				margin: 40rpx auto 0;
				background-color: #09BB07;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	
</style>
